<style lang="scss">
$left: 30rpx;

.purchased {
	margin: 0 $left;
	border: 1rpx solid rgb(229, 229, 229);
	box-shadow: 0rpx 3rpx 43rpx 0rpx rgba(4, 0, 0, .13);
	border-radius: 20rpx;
}

.purchased-top {
	height: 88rpx;
	padding: 0 32rpx 0 34rpx;
	background: rgb(255, 251, 235);
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 20rpx 20rpx 0 0;
}

.purchased-start-time {
	font-size: 28rpx;
	color: #333;
}

.purchased-code {
	height: 100%;
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: rgb(51, 51, 51);
}

.purchased-border {
	width: 100%;
	border-top: 2rpx dashed rgba(0, 0, 0, .1);
}

.purchased-content {
	padding: 46rpx 31rpx 52rpx 34rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.purchased-thumb {
	width: 165rpx;
	height: 232rpx;
}

.purchased-detail {
	width: calc(100% - 33rpx - 165rpx);
	height: 232rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.purchased-name {
	height: 34rpx;
	line-height: 34rpx;
	font-size: 36rpx;
	font-weight: bold;
	color: rgb(51, 51, 51);
}

.purchased-address-name {
	height: 27rpx;
	line-height: 27rpx;
	font-size: 28rpx;
	color: rgba(0, 0, 0, .5);
	display: flex;
	justify-content: space-between;
}

.purchased-address {
	height: 23rpx;
	line-height: 23rpx;
	font-size: 24rpx;
	color: rgba(0, 0, 0, .5);
}

.purchased-room {
	$color: rgb(242, 66, 68);
	height: 46rpx;
	line-height: 46rpx;
	align-self: baseline;
	font-size: 32rpx;
	color: $color;
	border-radius: 5rpx;
	border: 2rpx solid rgb(242, 66, 68);
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	margin-top: 14rpx;
}

.purchased-seat {
	height: 26rpx;
	line-height: 26rpx;
	font-size: 28rpx;
	color: rgb(242, 66, 68);
}

.purchased-location {
	width: 30rpx;
}
</style>

<template>
	<view class="purchased">

		<view class="purchased-top">

			<view class="purchased-start-time"><text>距离开场：</text><text>3小时25分</text></view>

			<button class="purchased-code" @click="onClickPurchasedCode">
				<view>查看取票码</view>

				<arrow-right-red class="purchased-code-icon"></arrow-right-red>
			</button>

		</view>

		<view class="purchased-border"></view>

		<view class="purchased-content">

			<image class="purchased-thumb" src="http://test.freeterna.com:8080/test/images/movie/1.jpg"></image>

			<view class="purchased-detail">
				<view class="purchased-name">叶问4：完结篇</view>

				<view class="purchased-address-name">
					<text>UME影城（重庆沙坪坝店）</text>
					<image class="purchased-location" src="/static/icon/index-location.png" mode="widthFix"></image>
				</view>

				<view class="purchased-address">渝北区青云路1号</view>

				<view class="purchased-room">6号IMAX厅</view>

				<view class="purchased-seat">A排 16号 B排 17号</view>
			</view>

		</view>

	</view>
</template>

<script>
import ArrowRightRed from "../../components/arrow-right-red";

export default {

	components: {
		ArrowRightRed,
	}

}
</script>